<template>
  <div class="root">
    <acme-app-bar title="Tab"></acme-app-bar>
    
    <div class="ui-title">基础用法</div>
    <acme-tab :tabs="tabs" @change="changeTab"></acme-tab>

    <div class="ui-title">自定义指示器</div>
    <acme-tab :tabs="tabs" lineBottom="0" :lineStyle="lineStyle" @change="changeTab"/>
  </div>
</template>

<script>
  import AcmeTab from "@/components/acme-design/tab";
  export default {
    components: {
      AcmeTab,
    },
    data() {
      return {
        tabs: [
          {
            name: "标签1",
          },
          {
            name: "标签2",
          },
          {
            name: "标签3",
          },
          {
            name: "标签4",
          },
          {
            name: "标签5",
          },
        ],
        lineStyle: {
          width: "30px",
          background: "#FA9324",
        },
      };
    },
    methods: {
      changeTab() {},
    },
  };
</script>